<template>
  <div class="job-description">
    <el-card class="jd-card">
      <template #header>
        <div class="card-header">
          <h1 class="title">填写职位信息</h1>
          <p class="sub-title">请输入目标职位的详细信息</p>
        </div>
      </template>

      <div class="jd-container">
        <el-form 
          :model="form" 
          ref="formRef"
          label-position="top"
          class="job-form"
        >
          <el-form-item 
            label="职位名称"
            prop="jobTitle"
            :rules="[{ required: true, message: '请输入职位名称' }]"
          >
            <el-input 
              v-model="form.jobTitle" 
              placeholder="例：高级前端开发工程师（Vue方向）"
            />
          </el-form-item>

          <el-form-item 
            label="职位描述"
            prop="jobDesc"
            :rules="[{ required: true, message: '请输入职位描述' }]"
          >
            <el-input 
              v-model="form.jobDesc" 
              type="textarea" 
              :rows="4"
              placeholder="请输入职位的主要工作内容和职责..."
            />
          </el-form-item>

          <el-form-item 
            label="职位要求"
            prop="requirements"
            :rules="[{ required: true, message: '请输入职位要求' }]"
          >
            <el-input 
              v-model="form.requirements" 
              type="textarea" 
              :rows="4"
              placeholder="请输入任职要求和技能要求..."
            />
          </el-form-item>
        </el-form>

        <div class="action-buttons">
          <el-button class="custom-button" @click="goBack">返回</el-button>
          <el-button 
            type="primary" 
            class="custom-button"
            :loading="loading"
            @click="handleSubmit"
          >
            开始分析
          </el-button>
        </div>
      </div>
    </el-card>
    <TabNav />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { jdApi } from '@/views/resume/api/index.js'
import TabNav from '@/components/TabNav/TabNav.vue'

const router = useRouter()
const formRef = ref(null)
const loading = ref(false)

const form = ref({
  // 职位ID
  id: null,
  // 用户ID
  userId: null,
  // 职位名称
  jobTitle: '前端开发工程师（Vue方向）',
  // 职位描述
  jobDesc: '负责公司核心产品的前端开发工作，使用Vue3技术栈...',
  // 职位要求
  requirements: '1. 3年以上前端开发经验，精通Vue技术栈...' ,
  // 创建时间
  createdAt: null,
  // 更新时间
  updatedAt: null
})

const goBack = () => {
  router.go(-1)
}
const handleSubmit = async () => {
  try {
    // 表单验证
    const valid = await formRef.value.validate()
    if (!valid) return

    loading.value = true
    // 提交职位信息
    await jdApi.submitJobDescription(form.value)
    ElMessage.success('提交成功，正在生成分析报告...')
    router.push('/diagnosisResults')
  } catch (error) {
    ElMessage.error(`提交失败: ${error.message}`)
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.job-description {
  .jd-card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    
    .el-form-item {
      margin-bottom: 28px;
      
      :deep(.el-input__inner),
      :deep(.el-textarea__inner) {
        border-radius: 8px;
        transition: border-color 0.3s ease;
        
        &:focus {
          border-color: #3b82f6;
          box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
        }
      }
    }
    
    .action-buttons {
      .custom-button {
        font-weight: 500;
        letter-spacing: 0.5px;
        transition: all 0.3s ease;
        
        &:hover {
          opacity: 0.9;
          transform: translateY(-1px);
        }
        
        &:active {
          transform: translateY(0);
        }
      }
    }
  }
}
</style>